<template>
  <div class="radio-item component-item" :style="{paddingLeft: data.config.labelWidth}">
    <label
      class="component-label"
      :style="{width: data.config.labelWidth}"
    >{{data.config.labelName}}</label>
    <Radio
      :value="view ? value : data.value"
      :size="data.config.size"
      :disabled="data.config.disabled"
      :readonly="pageType==='result' ? true : false"
      :border="data.config.border"
      @on-change="changeValue"
    >{{view ? label : data.config.label}}</Radio>
  </div>
</template>

<script>
import { getSourceData } from '../common'
export default {
  props: ['data', 'index', 'file', 'view', 'pageType'],
  data () {
    return {
      label: '',
      value: false
    };
  },
  watch: {
    file: {
      handler () {
        this.dataHandle();
      }
    }
  },
  methods: {
    // 数据处理
    dataHandle () {
      this.label = '';
      if (this.file) {
        let { databinding, key } = this.data;
        if (databinding) {
          try {
            let label = getSourceData(this.file, databinding);
            this.label = label;
          } catch (e) {
            console.log(e);
            this.$Message.error('数据获取出错');
          }
        }
        let { isDefaultData, result } = this.file
        // 值的获取
        if (!isDefaultData) {
          this.value = result[key]
          this.changeValue(this.value)
        }
      }
    },

    changeValue (value) {
      this.$emit('updateResult', {
        value,
        index: this.index
      });
    }
  },
  created () {
    this.dataHandle();
  }
};
</script>

<style lang="less" scoped>
.radio-item {
  line-height: 32px;
}

.checkbox-item {
  line-height: 32px;
}

.component-item {
  position: relative;
  label.component-label {
    display: inline-block;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 32px;
  }
}
</style>
